<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta name=viewport content="width=device-width,initial-scale=1,user-scalable=no">
    <meta name=x5-orientation content=portrait>
    <meta name=screen-orientation content=portrait>
    <title>捐赠证书</title>
    <link rel="stylesheet" href="{SITE_URL}app/{$GLOBALS['TS_URL']['app']}/css/cert.css">
    <script type="text/javascript" src="{SITE_URL}public/js/rem.js"></script>
    <script type="text/javascript" src="{SITE_URL}public/js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="{SITE_URL}public/js/html2canvas.js"></script>
    <script type="text/javascript" src="{SITE_URL}public/js/smatchScreen.js"></script>
    <script type="text/javascript" src="{SITE_URL}public/js/jquery.qrcode.min.js"></script>
    <link rel="stylesheet" href="{SITE_URL}public/font-awesome/css/font-awesome.min.css">
</head>
<body>
<!--画报-->
<div class="poster" data-id="poster">
    <div class="container" data-id="container">
        <div class="word-box" style="text-align: left;padding-left: 50px">
            <div style="float: right;font-size: 26px ">愿字{$strWish['wishid']}-{$GLOBALS['TS_USER']['userid']}</div>
            <div style="padding-top: 30px">
                <p>亲爱的{$GLOBALS['TS_USER']['username']}：</p>
                <p>你捐赠给{$strWish['group']['groupname']}的图书{$strWish['title']}共{$strWishUser['quota']}册（套）已经入库，帮助{$strWish['wisher']}达成了心愿。在改善流动儿童成长环境的道路上，感谢你与我们携手同行。</p></div>

            <div style="float: right;font-size: smaller;position:relative;">
                北京三知困难儿童救助服务中心<br>
                （新公民计划）<br>
                {php echo(date('Y年m月d日',$strWishUser['addtime']))}

                    <img class=transparent src="{SITE_URL}app/{$GLOBALS['TS_URL']['app']}/images/seal.png" style="width:180px;height:180px;position:absolute;left:150px;top:-5px;"  />

            </div>

        </div>
        <div class="seal"></div>

    </div>
</div>
<!--操作按钮-->
<div class="download-image">
    <div class="button" data-bind="download">
        <img src="{SITE_URL}public/images/download.jpg" alt="图片" class="poster-image" data-id="image">
        <span style="padding: 20px">长按这里下载图片<i class="fa fa-download" aria-hidden="true"></i></span>
    </div>
</div>

<script>
  $(function () {
    // 初始化一屏幕的高度
    var clientHeight = document.documentElement.clientHeight;
    $("[data-id='poster']").css({height:clientHeight+'px'});
    // 缩放图片
    SmatchScreen($("[data-id='container']").get(0), 'v-v', 750, 1334, false, false);

    // 此处是生成图片
    window.onload=function(){
      var screenRate = clientHeight / 1334
      html2canvas($("[data-id='container']").get(0),{
        useCORS:true,
        width:750*screenRate,
        height:1334*screenRate
      }).then(canvas => {
        var imgUrl = canvas.toDataURL();
        $('[data-id="image"]').attr('src',imgUrl)
      });
    }
  })
</script>
</body>
</html>